<template>
  <!-- <div
    v-if="isExternalUrl"
    :style="styleExternalIcon"
    class="svg-external-icon svg-icon"
    v-on="$listeners"
  /> -->
  <svg :class="svgClass" aria-hidden="true" v-on="$listeners">
    <use :href="svgName" />
  </svg>
</template>

<script>
  // doc: https://panjiachen.github.io/vue-element-admin-site/feature/component/svg-icon.html#usage
  // import { isExternalUrl } from '@utils/util';

  export default {
    name: 'svg-icon',
    props: {
      iconName: {
        type: String,
        required: true
      },
      className: {
        type: String,
        default: ''
      }
    },
    computed: {
      // isExternalUrl() {
      //   return isExternalUrl(this.iconName);
      // },
      svgName() {
        return `#icon-${this.iconName}`;
      },
      svgClass() {
        if (this.className) {
          return 'svg-icon ' + this.className;
        } else {
          return 'svg-icon';
        }
      },
      styleExternalIcon() {
        return {
          mask: `url(${this.iconName}) no-repeat 50% 50%`,
          '-webkit-mask': `url(${this.iconName}) no-repeat 50% 50%`
        };
      }
    },
    install(Vue) {
      Vue.component(this.name, this);
    }
  };
</script>

<style>
  .svg-icon {
    display: inline-block;
    width: 1em;
    height: 1em;
    overflow: hidden;
    vertical-align: middle;
    fill: currentColor;
  }

  .svg-external-icon {
    display: inline-block;
    background-color: currentColor;
    mask-size: cover !important;
  }
</style>
